<template>
  <view>
    <swiper :style="{height:swiperBoxHeight + 'rpx'}" autoplay circular interval="5000" duration="2000"
            @change="onSwiperChange">
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="padding-lr" :style="{height:swiperHeight + 'rpx'}" @click="$emit('onClick', index)">
          <image class="radio-40 wh-full" :src="item.image_url" mode="aspectFix"/>
        </view>
      </swiper-item>
    </swiper>

    <view class="custom-dots">
      <view
          v-for="(item, index) in list" :key="index" :class="['dot', currentIndex === index ? 'dot-active' : '']"
          :style="{background:currentIndex === index ? dotActiveColor : dotColor, width:currentIndex === index ? dotActiveWidth + 'rpx' :''}"
          @click="currentIndex = index"/>
    </view>
  </view>
</template>

<script lang="ts">
import {PropType} from "vue";

export default {
  emits: ["onClick"],
  name: "MeSwiper",
  props: {
    list: {
      type: Array as PropType<SwiperItem[]>,
      default: () => []
    },
    swiperBoxHeight: {
      type: [String, Number],
      default: 400
    },
    swiperHeight: {
      type: [String, Number],
      default: 340
    },
    dotActiveWidth: {
      type: [String, Number],
      default: 40
    },
    dotActiveColor: {
      type: String,
      default: "#1073FF"
    },
    dotColor: {
      type: String,
      default: "#E7E7E7"
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    // 轮播图刷新
    onSwiperChange({detail}) {
      this.currentIndex = detail.current; // 获取当前索引
    },
  }
}
</script>
<style scoped lang="scss">
.custom-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -40rpx;
  position: relative;
  z-index: 1;
}

.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin: 0 8rpx;
  transition: all 0.3s;
}

.dot-active {
  border-radius: 10rpx;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

</style>